<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/4/3
  Time: 15:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="page"/>
<!DOCTYPE html>
<html>
<head>
    <title>Insert title here</title>
    <style type="text/css">
        form{ position:relative; left:50px; }
        .input_field { width: 620px; padding: 15px 0px; }
        .input_field p { position:relative; left:58px; margin: 0px 0px; }
        .input_field label { float: left; position:relative; top: 3px; }
        .input_field input { position:relative; }
        .input_field span { position:relative; left: 4px; color:#a8abab; }
        .input_field .codespan{ position:relative; top: -5px; left: 20px; }
        .input_field .vicode { position:relative; top:-6px; width:72px;  }
        .input_field img { position:relative; left:8px; width:72px; height:21px; }
        .input_field .imgchange { position:relative; top:-5px; left:15px; width:72px; height:21px; }
        .input_field .sub{ position:relative; left:58px; width:162px; }
        .input_field .toreg{ float: right; position:relative; top:4px; right:308px; }
    </style>
    <link rel="stylesheet" href="${ctx}/css/templatemo_style.css"/> <!-- 页面整体布局样式定义 -->
    <link rel="stylesheet" href="${ctx}/css/ddsmoothmenu.css"/> <!-- 菜单样式定义 -->
    <link rel="stylesheet" href="${ctx}/css/nivo-slider.css" media="screen"/> <!-- 焦点图样式定义 -->

    <script type="text/javascript" src="${ctx}/js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.nivo.slider.pack.js"></script> <!-- 焦点图JS脚本定义 -->

    <script type="text/javascript">
        var ctx = "${pageContext.request.contextPath}";

        function showUserName() {
            var name = "${user.username}";
            if (name != "") {
                $("#login").html(name);
                $("#exitP").show();
                $("#login").attr("href", ctx + "/user?flag=info&userId=${user.userId}");
            } else {
                $("#login").html("登录");
                $("#exitP").hide();
                $("#login").attr("href", ctx + "/user?flag=login");
            }
        }
        $(function () {
            $("#yzm").click(function () {
                var time = new Date();
                $("#imgcode").attr("src","${ctx}/drawimage?createTypeFlag=nl&time="+time);
            });
        });

    </script>
</head>

<body>
<div id="templatemo_body_wrapper">
    <div id="templatemo_wrapper">

        <!-- header -->
        <div id="templatemo_header">
            <div id="site_title"><h1><a href="">穿美在线鞋城</a></h1></div>
            <div id="header_right">
                <p>
                    <a href="${ctx}/user?flag=login" id="login">登录</a>&nbsp;
                    <span id="exitP" style="display: none"><a href="${ctx}/user?flag=logout" id="exit">注销</a></span>
                </p>
            </div>
            <div class="cleaner"></div>
        </div>
        <!-- END of templatemo_header -->


        <!-- menu -->
        <div id="templatemo_menubar">
            <div id="top_nav" class="ddsmoothmenu">
                <ul>
                    <li><a href="" class="selected">首页</a></li>
                    <li><a href="">产品</a></li>
                    <li><a href="">我的购物车</a></li>
                    <li><a href="">我的订单</a></li>
                </ul>
                <br style="clear: left"/>
            </div> <!-- end of ddsmoothmenu -->
        </div><!-- END of templatemo_menubar -->


        <!-- main -->
        <div id="templatemo_main">
            <!-- 内容展示区 -->
            <div id="content" style="margin-left: 220px;margin-top: 20px" class="float_r">
                <h3>注册</h3>
                <form action="${ctx}/user" method="post" id="regform">
                    <input type="hidden" id="flag" name="flag" value="rs">
                    <div class="input_field">
                        <p style="color:red">${message}</p>
                    </div>

                    <div class="input_field">
                        <label for="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名&nbsp;:&nbsp;</label>
                        <input type="text" id="username" name="username" value="">
                        <span id="un_msg">2-8个字符，可以使用字母、数字、下划线、须以字母开头</span>
                    </div>

                    <div class="input_field">
                        <label for="phone">手机号码：</label>
                        <input type="text" id="phone" name="phone" value="" maxlength="11">
                        <span id="phone_msg">请输入11位有效手机号码</span>
                    </div>

                    <div class="input_field">
                        <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                        <input type="password" id="password" name="password" value="" >
                        <span id="pw_msg">6~16位字符，区分大小写</span>
                    </div>

                    <div class="input_field">
                        <label for="confirm">确认密码：</label>
                        <input type="password" id="confirm" name="confirm" value="" >
                        <span id="confirm_msg">请与密码保持一致</span>
                    </div>

                    <div class="input_field">
                        <label for="vicode">验&nbsp;证&nbsp;码&nbsp;：</label>
                        <input type="password" id="vicode" name="vicode" value="" maxlength="4" class="vicode" >
                        <img id="imgcode" alt="" src="${ctx}/drawimage?createTypeFlag=nl">
                        <a href="javascript:void(0);" class="imgchange" id="yzm">看不清，换一张</a>
                        <span id="vicd_msg" class="codespan">请输入4位验证码，不区分大小写</span>
                    </div>

                    <div class="input_field">
                        <input type="submit" class="sub" value="注册">
                    </div>
                </form>
            </div>
                <div class="cleaner"></div>
            </div>




                <!-- footer -->
                <div id="templatemo_footer">
                    <p>
                        <a href="">首页</a> | <a href="">产品</a> | <a href="">我的购物车</a> | <a href="">我的订单</a>
                    </p>
                    版权所有 (c) 2018 <a href="javascript:void(0);">金桥软件</a>
                </div><!-- END of templatemo_footer -->


            </div><!-- END of templatemo_wrapper -->
        </div><!-- END of templatemo_body_wrapper -->


        <script type="text/javascript">
            //校验用户名输入规则
            function checkUsername() {
               var name = $("#username").val();
               if(name == null||name.length == 0)
               {
                   $("#un_msg").html("请输入用户名");
                   $("#un_msg").css("color","#f31106");
                   return false;
               }
               var regexp = /^[a-zA-Z]{1}[a-zA-z0-9_]{1,7}$/
                if(!regexp.test(name))
                {
                    $("#un_msg").html("用户名不符合要求");
                    $("#un_msg").css("color","#f31106");
                    return false;
                }
                return true;
            }
            //校验手机号规则
            function chkphone(){
                var phone = $("#phone").val();
                if(phone == null || phone.length ==0){
                    $("#phone_msg").html("请输入手机号");
                    $("#phone_msg").css("color","#f31106");
                }
                var regexp = /^1[34578]\d{9}$/
                if(!regexp.test(phone))
                {
                    $("#phone_msg").html("手机号不符合要求");
                    $("#phone_msg").css("color","#f31106");
                    return false;
                }
                return true;
            }
            //校验密码规则
            function chkpassword(){
                var passwd = $("#password").val();
                if(passwd == null || passwd.length ==0){
                    $("#pw_msg").html("请输入密码");
                    $("#pw_msg").css("color","#f31106");
                    return false;
                }
                var regexp = /^[a-zA-Z0-9]{1}[a-zA-Z0-9_]{5,15}$/
                if(!regexp.test(passwd))
                {
                    $("#pw_msg").html("密码不符合要求");
                    $("#pw_msg").css("color","#f31106");
                    return false;
                }
                return true;
            }
            //确认密码校验
            function chkconfirm(){
                var confirm = $("#confirm").val();
                if(confirm == null || confirm.length ==0){
                    $("#confirm_msg").html("请输入确认密码");
                    $("#confirm_msg").css("color","#f31106");
                    return false;
                }
                if(confirm!=$("#password").val())
                {
                    $("#confirm_msg").html("两次密码不一致");
                    $("#confirm_msg").css("color","#f31106");
                    return false;
                }
                return true;
            }
           //验证码校验
           function chkimgcode(){
                var imgcode = $("#vicode").val();
               if(imgcode == null ||imgcode.length ==0){
                   $("#vicd_msg").html("请输入验证码");
                   $("#vicd_msg").css("color","#f31106");
                   return false;
               }
               var regexp = /^[a-zA-Z0-9]{4}$/
               if(!regexp.test(imgcode))
               {
                   $("#vicd_msg").html("验证码不符合要求");
                   $("#vicd_msg").css("color","#f31106");
                   return false;
               }
               return true;
           }

            $(function () {
                showUserName();
                $('#slider').nivoSlider();
                //校验用户名
                $("#username").blur(function () {
                    if(checkUsername()){
                        $.ajax({
                            url:ctx +"/checkuser",
                            type:"post",
                            data:{"username":$("#username").val()},
                            dataType:"json",
                            success:function (data) {
                                if(data.code == true)
                                {
                                    $("#un_msg").html("用户名已存在，不能重复注册");
                                    $("#un_msg").css("color","#f31106");
                                    $(".sub").attr("disabled",true);
                                }
                                else{
                                    $("#un_msg").html("用户名可以注册");
                                    $("#un_msg").css("color","#0000FF");
                                    $(".sub").attr("disabled",false);
                                }
                            }
                        })
                    }
                });
                //校验手机号
                $("#phone").focus(function () {
                    $("#phone_msg").html("请输入11位有效号码");
                    $("#phone_msg").css("color","#a8abab");
                });
                $("#phone").blur(function () {
                    if(chkphone())
                    {
                        $("#phone_msg").html("手机号可以注册");
                        $("#phone_msg").css("color","#0000FF");
                    }

                });
                //校验密码
                $("#password").focus(function () {
                    $("#pw_msg").html("请输入密码");
                    $("#pw_msg").css("color","#a8abab");
                });
                $("#password").blur(function () {
                    if(chkpassword())
                    {
                        $("#pw_msg").html("密码可以注册");
                        $("#pw_msg").css("color","#0000FF");
                    }
                });
                //确认密码
                $("#confirm").focus(function () {
                    $("#confirm_msg").html("请输入确认密码");
                    $("#confirm_msg").css("color","#a8abab");
                });
                $("#confirm").blur(function () {
                    if(chkconfirm())
                    {
                        $("#confirm_msg").html("两次密码一致");
                        $("#confirm_msg").css("color","#0000FF");
                    }
                });

                //验证码校验
                $("#vicode").focus(function () {
                    $("#vicd_msg").html("请输入4位验证码，不区分大小写");
                    $("#vicd_msg").css("color","#a8abab");
                });
                $("#vicode").blur(function () {
                    chkimgcode();
                });
                //表单提交校验
                $("#regform").submit(function () {
                    if(!checkUsername())
                        return false;
                    if(!chkphone())
                        return false;
                    if(!chkpassword())
                        return false;
                    if(!chkimgcode())
                        return false;

                    $(this).submit();
                });
            });


        </script>
        <script type="text/javascript" src="${ctx}/js/stock-check.js"></script> <!-- 添加购物车JS脚本定义 -->
</body>
</html>